---
title: "Grid Auto Columns"
# description: "Utilities for controlling the size of implicitly-created grid columns."
description: "用于控制隐式创建的网格列的大小的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/gridAutoColumns'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用方法

<!-- Use the `auto-cols-{size}` utilities to control the size implicitly-created grid columns. -->
使用 `auto-cols-{size}` 功能类来控制隐式创建的网格列的大小。

```html
<div class="grid grid-flow-col **auto-cols-max**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the grid-auto-columns property at a specific breakpoint, add a `{screen}:` prefix to any existing grid-auto-columns utility. For example, use `md:auto-cols-min` to apply the `auto-cols-min` utility at only medium screen sizes and above. -->
要在特定的断点处控制 grid-auto-columns 属性，可以在任何现有的 grid-auto-columns 功能类前添加 `{screen}:` 前缀。例如，使用 `md:auto-cols-min` 来仅在中等尺寸及以上的屏幕应用 `auto-cols-min` 功能。

```html
<div class="grid grid-flow-col auto-cols-max **md:auto-cols-min**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 定制

<!-- By default Tailwind includes four general purpose grid-auto-columns utilities. You can customize these in the `theme.gridAutoColumns` section of your `tailwind.config.js` file. -->
默认情况下，Tailwind 包括四个通用的 grid-auto-columns 功能类。您可以在您的 `tailwind.config.js` 文件的 `theme.gridAutoColumns` 部分定制这些功能类。

```js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridAutoColumns: {
          '2fr': 'minmax(0, 2fr)',
        }
      }
    }
  }
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在 [主题自定义文档](/docs/theme#customizing-the-default-theme) 中了解更多关于自定义默认主题的信息。

### 变体

<Variants plugin="gridAutoColumns" name="grid-auto-columns" />

### 禁用

<Disabling plugin="gridAutoColumns" name="grid-auto-columns" />
